k<script lang='ts' setup>
import { ref, watch, reactive } from 'vue'
import DictionaryForm from './dictionary-form.vue'
const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'save-success'): void,
}>()
const props = defineProps({
    formDialogVisible: {
        type: Boolean,
        default: false,
    },
    dictionaryId: {
        type: String,
        default: '',
    },
    codeItemId: {
        type: String,
        default: '',
    }
})
const DictionaryFormRef = ref()
const formDialogVisible = ref(props.formDialogVisible)
watch(() => props.formDialogVisible, val => {
    formDialogVisible.value = val
})
watch(formDialogVisible, val => {
    emit('update:visible', val)
})

const DictionaryFormDialogState = reactive({
    /** 关闭处理 */
    handleClose: () => {
        formDialogVisible.value = false
    },

    /** 保存按钮点击事件 */
    onSaveButtonClick: () => {
        DictionaryFormRef.value.save()
    },

    /** 保存回调 */
    onSaveSuccess: () => {
        emit("save-success")
        formDialogVisible.value = false
    },
})

</script>
<template>
    <div class="jxtech-dialog-form">
        <el-dialog
            v-model="formDialogVisible"
            title="数据字典-字典项"
            width="40%"
            destroy-on-close
            :before-close="DictionaryFormDialogState.handleClose"
        >
            <dictionary-form
                ref="DictionaryFormRef"
                :dictionary-id="dictionaryId"
                :code-item-id="codeItemId"
                @save-success="DictionaryFormDialogState.onSaveSuccess"
            ></dictionary-form>
            <template #footer>
                <span class="dialog-footer">
                    <jxtech-cancel-button @click="DictionaryFormDialogState.handleClose"></jxtech-cancel-button>
                    <jxtech-ok-button @click="DictionaryFormDialogState.onSaveButtonClick"></jxtech-ok-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>